<template>
    <input type="text" v-model="username" />

    <div v-once>
        {{ username }}<br />
    </div>

    <div v-memo="[password]">
        {{ username }} --- {{ password }}
    </div>

    v-show 是否显示 如果为false 不显示 但是他会渲染在页面中
    <div v-show="IsShow">hello world 是否显示</div>

    v-if=false 这个元素直接不会渲染在页面中
    <div v-if="IsShow">是否显示还是隐藏</div>

    <ul>
        <li v-for="item in list">
            {{ item.id }} - {{ item.nickname }} - {{ item.age }} - {{ item.pender }}
        </li>
    </ul>

    <div v-html="content"></div>
    
    <duv v-pre>{{ content }} 不解析变量 原样输出</duv>
    
    <h1>绑定属性</h1>
    <p v-bind:title="nickname">绑定属性全称的写法</p>
    <p :title="nickname">绑定属性全称的写法</p>

    <h1>绑定事件方法</h1>
    <button v-on:click="demo">全称绑定</button>
    <button @click="demo">缩写绑定事件</button>
    <br />

    <button @click="show = !show">{{ show ?  '隐藏' : '显示' }}</button>

    <Transition>
        <p v-if="show">
            v-enter 从隐藏到显示 <br />
            v-leave 从显示到隐藏 <br />
        </p>
    </Transition>

    <div v-if="os == 'windows'">windows</div>
    <div v-else-if="os == 'linux'">linux</div>
    <div v-else>其他值</div>
</template>

<script>
    import {ref} from 'vue'

    let username = ref('hello')
    let password = ref(123123)

    let IsShow = ref(false)

    let list = ref([
        {id: 1,nickname: '张三',age:20,gender:'女'},
        {id: 2,nickname: '张三',age:20,gender:'女'},
        {id: 3,nickname: '张三',age:20,gender:'女'},
        {id: 4,nickname: '张三',age:20,gender:'女'},
    ])

    let content = ref("<p>这是一个段落,<b>加粗</b></p>")

    let nickname = ref('hello')

    let demo = () => {
        console.log('触发事件')
    }

    let show = ref(false)

    let os = ref('windows')

</script>

<style>
    .v-enter-active,.v-leave-active{
        transition: opacity 0.5s ease;
    }
    .v-enter-from,.v-leave-to {
      opacity: 0;
    }
</style>